<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-04-10 13:29:58
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-04-15 10:49:53
-->
<template>
    <div class="base-app-card-box">
        <el-card>
            <template #header>
                <div class="base-app-card-box-header">
                    <el-text>一周告警统计</el-text>
                    <div class="btns">
                        <el-tooltip content="刷新" placement="bottom" effect="light">
                            <el-icon size="1em" @click="chartDisplay">
                                <Refresh />
                            </el-icon>
                        </el-tooltip>
                        <el-tooltip content="更多" placement="bottom" effect="light">
                            <el-icon size="1em" @click="">
                                <More />
                            </el-icon>
                        </el-tooltip>
                    </div>
                </div>
            </template>
            <div v-loading="loading" element-loading-text="数据加载中...">
                <EChart ref="alarmEchartRef" container="alarmEchart" :echart-options="option"></EChart>
            </div>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { EChart } from '@package/ui/vue';
import { dayjs } from 'element-plus'
import { alarmStatistics } from '@/api'
const getOneWeekBefore = (day: number) => {
    const now = new Date();
    const oneWeekInMs = day * 24 * 60 * 60 * 1000;
    const oneWeekBefore = new Date(now.getTime() - oneWeekInMs);
    return dayjs(oneWeekBefore).format('YYYY-MM-DD');
}
// 表格数据配置
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    xAxis: {
        type: 'category',
        data: [getOneWeekBefore(6), getOneWeekBefore(5), getOneWeekBefore(4), getOneWeekBefore(3), getOneWeekBefore(2), getOneWeekBefore(1), getOneWeekBefore(0)]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [],
            type: 'line'
        }
    ]
}
const loading = ref(false);
// 获取图表数据
const loadData = async () => {
    loading.value = true;
    const { result } = await alarmStatistics({ type: 'week' });
    if (result) {
        option.series[0].data = result.yAxis;
    }
    loading.value = false;
}
// 绘制图表
const alarmEchartRef = ref();
const drawChart = () => {
    alarmEchartRef.value?.draw()
}
// 图表显示
const chartDisplay = async () => {
    await loadData();
    drawChart();
}
onMounted(() => {
    chartDisplay()
})
</script>
<style lang="scss" scoped>
.base-app-card-box-header {
    display: flex;
    flex-direction: row;
    align-items: center;

    .btns {
        flex: 1;
        display: flex;
        justify-content: end;

        i {
            cursor: pointer;
            padding: 0 5px;
        }
    }
}

.base-app-card-box {
    flex: 1;
    box-sizing: border-box;
    margin: 1em;

    &-header {
        font-size: 1.4em;
    }

}
</style>